<template>
  <div class="mt50">
    <!-- 导航组件 -->
    <van-nav-bar
      fixed
      left-arrow
      @click-left="$router.back()"
      :title="actionType == 1 ? '新增地址' : '编辑地址'"
    >
    </van-nav-bar>

    <!-- 地址编辑组件 -->
    <!-- currentAddress={areaCode:'地区码, 可以自动选中省市区'} -->
    <van-address-edit
      :show-delete="actionType == 2"
      :address-info="currentAddress"
      :area-list="areaList"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="remove"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { ref, onMounted, inject } from "vue";
import { showToast } from "vant";
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    const addressList = ref([]);
    const currentAddress = ref({});
    const actionType = ref(1);
    const currentId = ref(0);
    const router = useRouter();
    const route = useRoute();
    const axios = inject("axios");
    // 获取地址列表数据
    const getAddressList = () => {
      addressList.value = JSON.parse(
        localStorage.getItem("addressList") || "[]"
      );
    };

    // 根据区县名称获取areaCode
    const getAreaCode = (county) => {
      const [areaCode] = Object.entries(areaList.county_list).find(
        (item) => item[1] === county
      );
      return areaCode;
    };

    // 初始化表单数据
    const initFormData = () => {
      currentAddress.value = { ...route.query };
      currentId.value = route.query.id;
      // 更新操作类型
      actionType.value = 2;
      // 获取地区编码
      currentAddress.value.areaCode = getAreaCode(currentAddress.value.county);
    };

    // 删除地址
    const remove = () => {
      axios.post("/addressremove", { id: currentId.value }).then((res) => {
        showToast(res.msg);
        if (res.code === 200) {
          router.push({ name: "addr" });
        }
      });
    };

    const onSave = ({
      name,
      tel,
      province,
      city,
      county,
      addressDetail,
      isDefault,
    }) => {
      const { uid } = JSON.parse(localStorage.getItem("userLoginInfo") || "{}");
      var url = "/addressadd";
      var data = {
        uid,
        status: isDefault,
        name,
        tel,
        province,
        city,
        county,
        addressDetail,
      };
      // 新增地址
      if (actionType.value != 1) {
        url = "/addressedit";
        data.id = currentId.value;
      }
      axios.post(url, data).then((res) => {
        if (res.code === 200) {
          showToast(res.msg);
        }
      });
      // 跳转到地址列表页面
      router.push("/addr");
    };

    onMounted(() => {
      // 获取地址列表数据
      getAddressList();
      if (route.query.id && route.query.id > 0) {
        // 初始化表单数据
        initFormData();
      }
    });

    return {
      areaList,
      // 地址列表数据
      addressList,
      // 待编辑地址对象数据
      currentAddress,
      // 操作类型1新增,编辑
      actionType,
      // 待编辑的地址id
      currentId,
      // 方法
      remove,
      onSave,
    };
  },
};
</script>